<template>
    <div class="page-container">
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>策略审核队列</span>
                </div>
            </template>
            <el-table :data="reviewList" v-loading="loading" style="width: 100%" empty-text="当前没有待审核的策略">
                <el-table-column prop="id" label="ID" width="60"></el-table-column>
                <el-table-column prop="name" label="策略名称"></el-table-column>
                <el-table-column prop="type" label="类型" width="150"></el-table-column>
                <el-table-column prop="riskLevel" label="风险等级" width="100"></el-table-column>
                <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="220" fixed="right">
                    <template #default="scope">
                        <el-button size="small" @click="viewDetails(scope.row.id)">查看详情</el-button>
                        <el-button size="small" type="primary" @click="handleApprove(scope.row)">通过</el-button>
                        <el-button size="small" type="danger" @click="handleReject(scope.row)">拒绝</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getStrategiesForReview, approveStrategy, rejectStrategy } from '@/api/strategyApi';

const router = useRouter();
const reviewList = ref([]);
const loading = ref(true);

const fetchReviewList = async () => {
    loading.value = true;
    try {
        const response = await getStrategiesForReview();
        reviewList.value = response.data;
    } catch (error) {
        ElMessage.error('获取待审核列表失败');
    } finally {
        loading.value = false;
    }
};

const handleApprove = async (strategy) => {
    try {
        await approveStrategy(strategy.id);
        ElMessage.success(`策略 "${strategy.name}" 已批准`);
        fetchReviewList();
    } catch (error) {
        ElMessage.error('批准操作失败: ' + (error.response?.data?.message || error.message));
    }
};

const handleReject = (strategy) => {
    ElMessageBox.prompt('请输入拒绝原因', '拒绝策略', {
        confirmButtonText: '确认拒绝',
        cancelButtonText: '取消',
        inputPattern: /.+/,
        inputErrorMessage: '拒绝原因不能为空',
    })
        .then(async ({ value }) => {
            try {
                await rejectStrategy(strategy.id, value);
                ElMessage.success(`策略 "${strategy.name}" 已被拒绝`);
                fetchReviewList();
            } catch (error) {
                ElMessage.error('拒绝操作失败: ' + (error.response?.data?.message || error.message));
            }
        })
        .catch(() => {
            ElMessage.info('已取消拒绝操作');
        });
};

const viewDetails = (id) => {
    router.push({ name: 'StrategyDetail', params: { id } });
}

onMounted(fetchReviewList);
</script>

<style scoped>
.page-container {
    padding: 20px;
}

.card-header {
    font-size: 18px;
    font-weight: bold;
}
</style>